<template>
    <div>
        <!-- 打印订单 -->
        <el-dialog title="订单信息打印预览" :visible.sync="dialogVisible" width="900px" v-if="orderDatalist">
            <el-row>
                <el-col :span="4">
                    <el-button size="medium" type="primary" v-print="'#printContent'">打 印</el-button>
                </el-col>
                <el-col :span="18">
                    <el-form :inline="true" :model="formInline">
                        <el-form-item label="展示价格">
                            <el-switch v-model="formInline.showPrice" active-color="#13ce66" inactive-color="#ff4949">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="折扣">
                            <el-input-number size="small" v-model="formInline.discount" :min="0"
                                :max="parseInt(orderDatalist.proTotalPrice)"
                                @change="adminDiscountPriceChange"></el-input-number>
                        </el-form-item>
                        <el-form-item label="标题">
                            <el-input size="small" v-model="formInline.title"></el-input>
                        </el-form-item>
                        <el-form-item label="经手人">
                            <el-input size="small" v-model="formInline.jingshou"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

            <div id="printContent">
                <div class="printTitle">{{ formInline.title }}</div>
                <printTable :formInline="formInline" :orderDatalist="orderDatalist"></printTable>
            </div>


            <div class="description" v-loading="loading">
            </div>
        </el-dialog>

        <el-dialog v-if="orderDatalist" title="提示" :visible.sync="modal2" width="30%">
            <div class="logistics acea-row row-top">
                <div class="logistics_img"><img src="@/assets/imgs/expressi.jpg"></div>
                <div class="logistics_cent">
                    <span class="mb10">物流公司：{{ orderDatalist.deliveryName }}</span>
                    <span>物流单号：{{ orderDatalist.deliveryId }}</span>
                </div>
            </div>
            <div class="acea-row row-column-around trees-coadd">
                <div class="scollhide">
                    <el-timeline :reverse="reverse">
                        <el-timeline-item v-for="(item, i) in result" :key="i">
                            <p class="time" v-text="item.time"></p>
                            <p class="content" v-text="item.status"></p>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="modal2 = false">关闭</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { orderDetailApi, getLogisticsInfoApi, orderUpdateAdminDiscountApi } from '@/api/order'
import printTable from './printTable'
export default {
    name: 'OrderDetail',
    components: { printTable },
    props: {
        orderId: {
            type: String,
            default: 0
        }
    },
    data() {
        return {
            formInline: {
                // 展示价格
                showPrice: true,
                discount: 0,
                title: '文乐文（得昱公司）【销售单】'
            },
            reverse: true,
            dialogVisible: false,
            orderDatalist: null,
            loading: false,
            modal2: false,
            result: []
        }
    },
    mounted() {
    },
    methods: {
        calNum() {
            let num = 0;
            for (let index = 0; index < this.orderDatalist.orderInfo.length; index++) {
                const element = this.orderDatalist.orderInfo[index];
                num += element.info.payNum
            }
            return num;
        },
        adminDiscountPriceChange(e) {
            this.orderDatalist.adminDiscountPrice = e
            orderUpdateAdminDiscountApi(this.orderDatalist).then(result => {

                orderDetailApi({ orderNo: this.orderDatalist.orderId }).then(res => {
                    this.orderDatalist = res
                }).catch(() => {
                    this.orderDatalist = null
                })
            })
        },
        openLogistics() {
            this.getOrderData()
            this.modal2 = true;
        },
        // 获取订单物流信息
        getOrderData() {
            getLogisticsInfoApi({ orderNo: this.orderId }).then(async res => {
                this.result = res.list;
            })
        },
        getDetail(id) {
            this.loading = true
            orderDetailApi({ orderNo: id }).then(res => {
                this.orderDatalist = res
                this.loading = false
            }).catch(() => {
                this.orderDatalist = null
                this.loading = false
            })
        }
    }
}
</script>

<style scoped lang="scss">
#printContent {
    color: #000000
}

.printTitle {
    font-size: 20px;
    text-align: center;
    margin: 20px 0;
}

.tips {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}



.val {
    padding: 10px;
    line-height: 20px;
    width: 100%;
    box-sizing: border-box;
}




.logistics {
    align-items: center;
    padding: 10px 0px;

    .logistics_img {
        width: 45px;
        height: 45px;
        margin-right: 12px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .logistics_cent {
        span {
            display: block;
            font-size: 12px;
        }
    }
}

.trees-coadd {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;

    .scollhide {
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-left: 18px;
        padding: 10px 0 10px 0;
        box-sizing: border-box;

        .content {
            font-size: 12px;
        }

        .time {
            font-size: 12px;
            color: #2d8cf0;
        }

    }
}

.title {
    margin-bottom: 14px;
    color: #303133;
    font-weight: 500;
    font-size: 14px;
}

.description {
    &-term {
        display: table-cell;
        padding-bottom: 5px;
        line-height: 20px;
        width: 50%;
        font-size: 12px;
        color: #606266;
    }

    ::v-deep .el-divider--horizontal {
        margin: 12px 0 !important;
    }
}
</style>

<style @media="print">
@page {
    size: auto;
    margin: 3mm;
}

html {
    height: auto;
}
</style>